import { Menu } from 'antd';
import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { history } from 'umi';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const menuList: any = [
  {
    title: '首页',
    path: '/welcome',
    icon: <MailOutlined />,
    auth: 1,
  },
  {
    title: 'ui',
    path: '/ui',
    icon: <MailOutlined />,
    auth: 2,
  },
  {
    title: '表单',
    path: '/form',
    icon: <MailOutlined />,
    auth: 3,
    children: [
      {
        title: '登录',
        path: '/login',
        auth: 31,
      },
      {
        title: '注册',
        path: '/reg',
        auth: 32,
      },
    ],
  },
  {
    title: '表格',
    path: '/table',
    icon: <MailOutlined />,
    auth: 4,
  },
  {
    title: '城市管理',
    path: '/city',
    icon: <MailOutlined />,
    auth: 5,
  },
  {
    title: '地图',
    path: '/map',
    icon: <MailOutlined />,
    auth: 6,
  },
];

// const auth = JSON.parse(localStorage.getItem('auth') || '[]'); // [1,5,6]

// const authList = menuList.filter((item: any) => {
//   return auth.includes(item.auth);
// });
// console.log(authList);

// const items = authList.map((item: any) => {
//   return getItem(item.title, item.path, item.icon);
// });

// const items: MenuItem[] = [
//   getItem('首页', '/welcome', <MailOutlined />),

//   getItem('ui', '/ui', <AppstoreOutlined />, [
//     getItem('按钮', '/buttons'),
//     getItem('弹框', '/modals'),
//     getItem('Loading', '/loading'),
//     getItem('通知提醒', '/notification'),
//     getItem('全局Message', '/message'),
//   ]),

//   getItem('表单', '/form', <AppstoreOutlined />, [
//     getItem('登录', '/login'),
//     getItem('注册', '/reg'),
//   ]),

//   getItem('表格', '/table', <AppstoreOutlined />, [
//     getItem('基础表格', '/basic'),
//   ]),

//   getItem('城市管理', '/city', <MailOutlined />),

//   getItem('地图', '/map', <MailOutlined />),
// ];

const MyMenu = () => {
  const auth = JSON.parse(localStorage.getItem('auth') || '[]'); // [1,5,6]

  const authList = menuList.filter((item: any) => {
    return auth.includes(item.auth);
  });
  console.log(authList);

  const items = authList.map((item: any) => {
    return getItem(
      item.title,
      item.path,
      item.icon,
      item.children
        ? item.children.map((val: any) => getItem(val.title, val.path))
        : null,
    );
  });
  const itemClick = ({ keyPath }: { keyPath: string[] }) => {
    const url = keyPath.reverse().join('');
    history.push('/admin' + url);
  };
  return (
    <Menu
      theme="dark"
      defaultSelectedKeys={['1']}
      mode="vertical"
      items={items}
      onClick={itemClick}
    />
  );
};

export default MyMenu;
